<template>
  <div class="auto-page">
    <!-- 头部 -->
    <div class="page-header">
      <!-- 状态栏占位 -->
      <div class="plus-status"></div>
      <!-- 头部主体 -->
      <div class="page-header-body-container">
        <div class="page-header-body" @click="toSearch">
          <img src="../../static/icons/search_icon.png" alt="" />
          <div style="flex:1;"></div>
          <div style="height:21px;line-height:21px;margin: 2px 5px;border-radius:10px;background-color:#ee0a24;color:#FFF;padding:0 10px;">搜索</div>
        </div>
      </div>
      <!-- 头部为fixed时的占位元素 -->
      <div class="page-header-placeholder"></div>
    </div>
    <!-- 头部 End -->
    <!-- 轮播图 swiper-->
    <van-swipe class="my-swipe" :autoplay="1500" indicator-color="white">
      <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
    </van-swipe>
    <!-- 轮播图 swiper End -->
    <!-- 菜单按钮 -->
    <van-grid :column-num="4" :border="false">
      <van-grid-item
        v-for="value in 8"
        :key="value"
        icon="photo-o"
        text="文字"
      />
    </van-grid>
    <!-- 菜单按钮 End -->
    <!-- 活动图 (例：新会员注册)-->
    <div class="activity-img-container">
      <img
        ref="activity_img"
        src="../../static/images/activity-img.png"
        alt=""
      />
    </div>
    <!-- 活动图 End -->
    <!-- 热品推荐 -->
    <div class="goods-scroll-card f-column">
      <!-- 头部 -->
      <div class="goods-scroll-card-header f-row">
        <p class="title">热品推荐</p>
        <p class="check-more">更多</p>
      </div>
      <!-- 头部 End -->
      <!-- 列表 (滚动)-->
      <div class="goods-scroll-card-list">
        <div
          class="goods-scroll-card-list-item"
          v-for="(goods, gindex) in goodsScrollList"
          :key="gindex"
        >
          <img src="../../static/images/goods-img.png" alt="加载失败" />
          <div class="goods-name">
            <span class="text"
              ><label class="label">标签</label
              >商品名称名称名称名称名称名称名称名称名称名称名称名称名称名称</span
            >
          </div>
        </div>
      </div>
      <!-- 列表 End -->
    </div>
    <!-- 热品推荐 End -->
    <!-- 瀑布流商品列表 -->
    <div class="goods-waterfall-container">
      <div class="goods-waterfall-container-item">
        <img src="../../static/images/square-img.png" alt="商品图片" />
        <div class="p-lr-5">
          <div class="goods-name">
            <span class="text"
              ><label class="label">标签3</label
              >商品名称名称名称名称名称名称名称名称名称名称名称名称名称名称</span
            >
          </div>
          <div class="goods-msg">
            <div class="goods-msg-price">99</div>
            <span class="paid-number">5000+人付款</span>
          </div>
        </div>
      </div>

      <div class="goods-waterfall-container-item">
        <img src="../../static/images/square-img.png" alt="商品图片" />
        <div class="p-lr-5">
          <div class="goods-name">
            <span class="text"
              ><label class="label">标签3</label
              >商品名称名称名称名称名称名称名称名称名称名称名称名称名称名称</span
            >
          </div>
          <div class="goods-msg">
            <div class="goods-msg-price">99</div>
            <span class="paid-number">5000+人付款</span>
          </div>
        </div>
      </div>

      <div class="goods-waterfall-container-item">
        <img src="../../static/images/square-img.png" alt="商品图片" />
        <div class="p-lr-5">
          <div class="goods-name">
            <span class="text"
              ><label class="label">标签3</label
              >商品名称名称名称名称名称名称名称名称名称名称名称名称名称名称</span
            >
          </div>
          <div class="goods-msg">
            <div class="goods-msg-price">99</div>
            <span class="paid-number">5000+人付款</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      goodsScrollList: [{}, {}, {}, {}, {}],
    };
  },
  created() {},
  mounted() {
    this.initActivityImg("activity_img");
  },
  methods: {
    toCategory() {
      this.$router.push("Category");
    },
    toSearch() {
      this.$router.push("Search");
    },
    initActivityImg(ref) {
      let width,
        height,
        scale,
        clientWidth = document.body.clientWidth,
        clientHeight = document.body.clientHeight;
      width = this.$refs[ref].naturalWidth;
      height = this.$refs[ref].naturalHeight;
      scale = height / width;
      this.$refs[ref].style =
        "width:" +
        (clientWidth - 30) +
        "px;height" +
        (clientWidth - 30) * scale +
        "px;";
    },
  },
};
</script>

<style scoped>
.page-header {
  z-index: 99;
  width: 100vw;
  height: 50px;
  background-color: transparent;
  display: flex;
  flex-direction: column;
  position: relative;
}
.page-header-body-container {
  height: 50px;
  width: 100vw;
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #ee0a24;
  justify-content: center;
  align-items: center;
  position: fixed;
}
.page-header-body {
  width: calc(100% - 30px);
  height: 25px;
  background-color: #fff;
  border-radius: calc(25px / 2);
  display: flex;
  align-items: center;
}
.page-header-body img {
  height: 15px;
  width: 15px;
  margin: 5px 7px;
}
.page-header-placeholder {
  height: 50px;
  width: 100vw;
}
.my-swipe {
  margin: 10px 15px;
  border-radius: 10px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #ee0a24;
}

.activity-img-container {
  margin: 10px 15px;
  box-sizing: border-box;
  border-radius: 10px;
  overflow: hidden;
}
.van-grid {
  margin: 0 15px;
}
.goods-scroll-card {
  margin: 0 15px 10px 15px;
  min-height: 100px;
  background-color: #fff;
  border-radius: 10px;
}
.goods-scroll-card-header,
.goods-scroll-card-header .title,
.goods-scroll-card-header .checkmore {
  height: 30px;
  line-height: 30px;
  font-size: 12px;
}
.goods-scroll-card-header {
  padding: 0 10px;
}
.goods-scroll-card-header .title {
  flex: 1;
}
.goods-scroll-card-header .check-more {
  color: #999999;
  padding-right: 10px;
  position: relative;
}
.goods-scroll-card-header .check-more::after {
  position: absolute;
  right: 5px;
  top: 12px;
  content: "";
  width: 5px;
  height: 5px;
  border-top: 1px solid #999999;
  border-right: 1px solid #999999;
  transform: rotate(45deg);
}
.goods-scroll-card-list {
  min-width: 100%;
  white-space: nowrap;
  overflow-x: scroll;
}
.goods-scroll-card-list-item {
  margin: 0 10px;
  width: 100px;
  display: inline-flex;
  flex-direction: column;
}
.goods-scroll-card-list-item img {
  height: 6 0px;
  width: 100px;
}
.goods-name {
  height: 40px;
  max-width: 100%;
}
.goods-name .text {
  height: 40px;
  line-height: 20px;
  font-size: 10px;
  flex: 1;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.goods-name .label {
  height: 20px;
  padding: 0 5px;
  line-height: 20px;
  font-size: 7px;
  background-color: #ee0a24;
  border-radius: 3px;
  color: #ffffff;
  margin-right: 3px;
}
.goods-waterfall-container {
  margin: 0 15px;
  width: calc(100vw - 30px);
}
.goods-waterfall-container-item {
  display: inline-block;
  width: calc(50vw - 25px);
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 10px;
}
.goods-waterfall-container-item:nth-child(odd) {
  margin-right: 8px;
}
.goods-waterfall-container-item:nth-child(even) {
  margin-left: 8px;
}
.goods-waterfall-container-item img {
  width: calc(100%);
  border-radius: 10px;
}
.goods-msg {
  display: flex;
  align-items: center;
  width: 100%;
}
.goods-msg-price {
  font-size: 16px;
  color: #df2000;
}
.goods-msg-price::before {
  content: "￥";
  font-size: 10px;
}
.paid-number {
  margin-left: 5px;
  color: #999999;
  font-size: 10px;
}
</style>